<template>
  <div>
    <header class="bg-gray-100 shadow">
      <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
        <h1 class="text-3xl font-bold text-gray-900">{{ $route.meta.title }}</h1>
      </div>
    </header>
    <main>
      <div class="max-w-7xl mx-auto py-3 sm:px-6 lg:px-8">
        <!-- Replace with your content -->
        <div class="px-4 py-2 sm:px-0">
          <!--    page_content      -->
          <div class="grid gap-8 grid-cols-1">
            <el-card>
              <template #header>
                <div>
                  <span>我的支出</span>
                </div>
              </template>
              <el-table :data="pageInfo.records" style="width: 100%;">
                <el-table-column min-width="120" label="支出类型">
                  <template #default="scope">
                    <el-tag :type="scope.row.style">
                      <el-icon>
                        <component :is="scope.row.icon"></component>
                      </el-icon>
                      {{ scope.row.type }}
                    </el-tag>
                  </template>
                </el-table-column>
                <el-table-column min-width="120" label="支出金额">
                  <template #default="scope">
                    <span class="font-bold font-mono">- ¥{{ scope.row.amount }}</span>
                  </template>
                </el-table-column>
                <el-table-column min-width="180" label="支出时间" prop="spentAt"/>
                <el-table-column
                  min-width="120"
                  prop="note"
                  label="备注">
                  <template #default="scope">
                    <div v-if="scope.row.note !== ''">
                      {{ scope.row.note }}
                    </div>
                    <div v-else>
                      无
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="mt-2">
                <el-pagination background
                               @current-change="pageChange"
                               layout="prev, pager, next"
                               :pager-count="5"
                               :current-page="myPage.current"
                               :page-size="myPage.size"
                               :total="pageInfo.total"/>
              </div>
            </el-card>
          </div>
        </div>
        <!-- /End replace -->
      </div>
    </main>
  </div>
</template>

<script>
import request from '@/http/request'

export default {
  name: 'Spending',
  data() {
    return {
      myPage: {
        current: Number(this.$route.query.page) || 1,
        size: 8
      },
      pageInfo: {
        records: [],
      }
    }
  },
  watch: {
    'myPage.current'(page) {
      this.$router.push({
        query: {
          page
        }
      })
    }
  },
  methods: {
    getList() {
      request.getSpendingList(this.myPage.current, this.myPage.size, {typeId: ''}).then(res => {
        if (res.data.status === 200) {
          this.pageInfo = res.data.result.spendingList
        }
      })
    },
    pageChange(page) {
      this.myPage.current = page
      this.getList()
    }
  },
  mounted() {
    this.getList()
  }
}
</script>

<style scoped>

</style>